<template>
	<view>
		<view :class="dire">
			<view v-if="dire === 'right'">
				<view class="chat-bubble" style="background-color: #50e767;">
					<text :selectable="true">{{text}}</text>
				</view>
				<image :src="img" style="width: 75rpx;height: 75rpx;border-radius: 15rpx; position: relative;top: 31rpx;margin-right: 20rpx;"></image>
			</view>
			
			<view v-if="dire === 'left'">
				<image :src="img" style="width: 75rpx;height: 75rpx;border-radius: 15rpx; position: relative;top: 31rpx;margin-left: 20rpx;"></image>
				<view class="chat-bubble" style="background-color: #ffffff;">
					<text :selectable="true">{{text}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "chatLine",
		props: {
			dire: {
				type: String,
				default: "right"
			},
			img: {
				type: String,
				default: "/static/img/head.jpg"
			},
			text: {
				type: String,
				default: ""
			}
		},
		created() {
			console.info(this.text);
			console.info(this.img);
			
		},
		data() {
			return {
				
				
			};
		}
	}
</script>

<style>
	.right{
		display: flex;
		width: 750rpx;
		justify-content: flex-end;
		
	}
	.left{
		display: flex;
		width: 750rpx;
		justify-content: flex-start;
	}
	
	.chat-bubble {
		max-width: 500rpx;
		border-radius: 20rpx;
		display: inline-flex;
		padding:  10rpx;
		margin-right: 20rpx;
		margin-left: 20rpx;
		font-size: 30rpx;
	}

</style>
